<script lang="ts" setup>
import { Card, Carousel, Col, Row } from 'ant-design-vue';

const banners = [
  {
    img: 'https://inews.gtimg.com/om_bt/OVx3YS2XJc1zbndGTkjPKW9J0W7kN8M0SIidT-3K4mb2YAA/641',
    title:
      '标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',
  },
  {
    img: 'https://inews.gtimg.com/om_bt/OEnnhGZob_mjIHfTaDGI02AgC2a-_0S_zGPSwOP5oHn0MAA/641',
    title:
      '标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',
  },
];
</script>

<template>
  <Card :bordered="false">
    <template #title>
      <h3 class="text-lg font-semibold tracking-tight">通知公告</h3>
    </template>
    <template #extra>
      <a-button type="link">更多</a-button>
    </template>
    <Row :gutter="10">
      <Col :span="10">
        <Carousel :autoplay="true" effect="fade" dot-position="right">
          <div v-for="(item, index) in banners" :key="index">
            <img :src="item.img" :alt="item.title" />
            <div class="title">{{ item.title }}</div>
          </div>
        </Carousel>
      </Col>
      <Col :span="14"> 公告列表 </Col>
    </Row>
  </Card>
</template>

<style scoped>
.ant-carousel .slick-slide {
  text-align: center; /* 对齐方式 */
}

.ant-carousel .slick-slide img {
  width: 100%; /* 图片宽度 */
  height: 200px; /* 高度自适应 */
}

.ant-carousel .slick-slide .title {
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 距离底部 */
  width: 100%; /* 全宽 */
  padding: 5px 15px;
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号来代表被修剪的文本 */
  line-height: 30px;
  color: #fff; /* 文字颜色 */
  text-align: left; /* 居中对齐 */
  white-space: nowrap; /* 防止文本换行 */
  background: rgb(0 0 0 / 50%); /* 背景颜色 */
}
</style>
